<!-- NewPracticeCompanyList_frame.html -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
		<title>企业列表frame</title>
		<link rel="stylesheet" href="../../css/api.css" />
		<link rel="stylesheet" href="../../css/mui.min.css"/>
		<link rel="stylesheet" href="../../css/base.css"/>
		<link rel="stylesheet" href="../../css/CFNetPP_Base.css">
		<link rel="stylesheet" href="../../css/newPractice.css">
		<style type="text/css">
			html,body{
				margin: 0;
				padding: 0;
			}
			p{
				margin: 0;
				padding: 0;
			}
			.img-div{
				width: calc(100% - 2px);
				padding-bottom: calc(100% - 2px);
				background-image: url(../../image/icon_compentition_introduce.jpg);
				background-repeat: no-repeat;
			    background-size: cover;
			    background-position: center;
			}
			.company-name{
				font-size: 16px;
				line-height: 22px;
			}
			.mui-table-view-cell>a:not(.mui-btn) .company-detail{
				padding-top: 4px;
				color: #666;
				font-size: 14px;
			}
			.bottom-sub-title-left{
				display: inline;
				float: left;
				max-width: calc(100% - 70px);
			}
			.bottom-sub-title-right{
				display: inline;
				float: right;
			}
			.mui-table-view-cell>a:not(.mui-btn) .course-img{
				width: 140px;
				height: 90px;
			}
			.hotc-sub-left-div{
				width: 140px;
				height: 100px;
			}
			.hotc-sub-right-div{
				width: calc(100% - 140px);
			}
			.hot-company-img{
				width: 100%;
				height: 100%;
				border-radius: 10px;
			}
			.mui-table-view-cell .hot-c-type{
				margin-bottom: 10px;
			}
			.hotc-sub-right-div{
				padding-top: 14px;
			}
		</style>
	</head>
	<body>
		<!-- <div class="hot-news-title">
			<span class="base_dark_grey_shallow base_content_font hot-news-title-span">
				企业宣传
			</span>
		</div> -->
		<div class="train-div mui-table-view">
			<ul id="company_tableview" class="mui-table-view">
				<!-- <li class="mui-table-view-cell mui-media">
					<a href="javascript:;"> 
						<img class="mui-media-object mui-pull-left course-img" src="../../image/list-default.png"/>
						<div class="mui-media-body">
							<p class="company-name base_dark_grey_shallow">过往实习</p>
						</div>
						<div class="mui-media-body">
							<div class="">
								<p class="mui-ellipsis subtitle company-detail">
									过往实习过往实习过往实习过往实习过往实习过往实习过往实习过往实习过往实习过往实习过往实习过往实习过往实习过往实习
								</p>
								<p class="mui-ellipsis subtitle bottom-sub-title-left">
									顺丰速递
								</p>
								<p class="mui-ellipsis subtitle bottom-sub-title-right">
									2019.02.02
								</p>
							</div>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media content-sub-div">
					<a href="javascript:;" class="hot-c-a">
						<div class="hotc-sub-left-div">
							<img src="../../image/course_placehoder.png" class="hot-company-img">
						</div>
						<div class="hotc-sub-right-div">
							<p class="hot-c-title">
								顺丰速递
							</p>
							<p class="hot-c-type">
								企业类型:物流
							</p>
							<p class="hot-c-type">
								实习岗位:仓储/物流
							</p>
						</div>
					</a>
				</li> -->
				<div class="noSign" hidden="hidden" id="noData">
					<img src="../../image/icon_img.png" width="60%">
					<p class="font16 top_15 base_dark_grey" >
						暂无数据
					</p>
				</div>
				<div class="loadFailure" hidden="hidden" id="noNet">
					<img src="../../image/icon_img01.png" width="60%">
					<p class="" >
						数据加载失败
					</p>
					<p>
						请检查您的网络
					</p>
					<button type="button" class="mui-btn mui-btn-outlined" onclick="refreshData()">
						重新加载
					</button>
				</div>
			</ul>
		</div>
	</body>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript" src="../../script/jquery.min.js"></script>
	<script type="text/javascript" src="../../script/mui.min.js"></script>
	<script type="text/javascript" src="../../script/MD5.js"></script>
	<script type="text/javascript" src="../../script/requestTool.js"></script>
	<script type="text/javascript" src="../../script/timeStampTool.js"></script>
	<script type="text/javascript">
		var page = 1;
		var rows = 10;
		var dropRefreshCount = 0;
		var companyArr = new Array();
		apiready = function(){
			setRefreshHeader();
			setPullUpRefresh();
			loadCompanyData();
		}
		//下拉刷新
		function setRefreshHeader() {
			api.setRefreshHeaderInfo({
				visible : true,
				bgColor : '#ccc',
				textColor : '#fff',
				textDown : '下拉刷新...',
				textUp : '松开刷新...',
				showTime : true
			}, function(ret, err) {
				refreshData();
			});
		}
		// 上拉加载
		function setPullUpRefresh() {
			api.addEventListener({
				name : 'scrolltobottom'
			}, function(ret, err) {
				if (dropRefreshCount >= rows) {
					dropRefreshCount = 0;
					page++;
					loadCompanyData();
				}
			});
		}
		function refreshData(){
			page = 1;
			loadCompanyData();
		}
		//加载企业列表
		function loadCompanyData(){
			var params = {
				page : page,
				rows : rows
			};
			if (page == 1) {
				api.showProgress({
				    style: 'default',
				    animationType: 'fade',
				    title: '数据加载中...',
				    text: '',
				    modal: false
				});
			}
			cfnetppPOST(url_newpracticeCompanyList, params, true, function(data, status){
				api.refreshHeaderLoadDone();
				api.hideProgress();
				if (status == "success") {
					if (data.code == 200) {
						if (page == 1) {
							companyArr = [];
							$('#company_tableview').html('');
						}
						var jsonData = data.data;
						var company_list = jsonData.company_list;
						if (company_list != undefined && company_list != null && company_list.constructor == Array && company_list.length > 0) {
							$('#noData').hide();
							$('#noNet').hide();
							dropRefreshCount = company_list.length;
							setupCompanyHtml(company_list);
						}else{
							$('#company_tableview').html('');
							$('#noData').show();
							$('#noNet').hide();
						}
					}else{
						if (page == 1) {
							$('#company_tableview').html('');
							$('#noData').show();
							$('#noNet').hide();
						}
					}
				}else{
					if (page == 1) {
						$('#company_tableview').html('');
						$('#noData').hide();
						$('#noNet').show();
					}
				}
			});
		}
		function setupCompanyHtml(arr){
			var oldCount = companyArr.length;
			companyArr = companyArr.concat(arr);
			var newCount = companyArr.length;
			for (var i = oldCount; i < newCount; i++) {
				var companyData = companyArr[i];
				$('#company_tableview').append(companyCellHtml(i, companyData));
			}
			setupCellClick();
		}
		function setupCellClick(){
			$('.mui-table-view-cell').unbind('click');
			$('.mui-table-view-cell').click(function(){
				var index = $(this).attr('index');
				var companyData = companyArr[parseInt(index)];
				api.openWin({useWKWebView:true,
				    name: 'NewPracticeCompanyDetail_win',
				    url: 'NewPracticeCompanyDetail_win.html',
				    pageParam: {
				    	id : companyData.companyid
				    }
				});
			});
		}
		//企业cell代码
		function companyCellHtml(index, data){
			var companyname = data.company_name;
			var company_type = data.company_type;
			var companytype = "企业类型:" + company_type;
			if (company_type == null) {
				companytype = "企业类型:--";
			}
			var logoImg = data.company_logo;
			if (logoImg == null || logoImg == '') {
				logoImg = '../../image/course_placehoder.png'
			}
			var companypost = "实习岗位:--";
			var post_list = data.post_list;
			if (post_list.length > 0) {
				companypost = "实习岗位:"
				for (var i = 0; i < post_list.length; i++) {
					var postname = post_list[i].post_name;
					companypost  = companypost + postname + '/';
					if (i == 2) {
						break;
					}
				}
				companypost = companypost.substring(0, companypost.length - 2);
			}
			return '<li index="'+index+'" class="mui-table-view-cell mui-media content-sub-div">'+
						'<a href="javascript:;" class="hot-c-a">'+
							'<div class="hotc-sub-left-div">'+
								'<img src="'+logoImg+'" class="hot-company-img">'+
							'</div>'+
							'<div class="hotc-sub-right-div">'+
								'<p class="hot-c-title">'+
									companyname+
								'</p>'+
								'<p class="hot-c-type">'+
									companytype+
								'</p>'+
								'<p class="hot-c-type">'+
									companypost+
								'</p>'+
							'</div>'+
						'</a>'+
					'</li>';
		}
	</script>
</html>